import React, { useEffect, useRef, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'

export default function NotFound() {
  const [time, setTime] = useState(3)
  const timerRef = useRef(-1)
  const history = useHistory()
  useEffect(() => {
    timerRef.current = window.setInterval(() => {
      setTime((time) => time - 1)
    }, 1000)
    return () => {
      clearInterval(timerRef.current)
    }
  }, [])

  useEffect(() => {
    if (time === 0) {
      clearInterval(timerRef.current)
      history.push('/home')
    }
  }, [time, history])

  return (
    <div>
      <span>
        你访问的页面不存在，{time}秒后跳转到<Link to="/home">首页</Link>
      </span>
    </div>
  )
}
